/**
* Created by ren on 2016/12/28.
*/
<template>
  <div class='goodsDetail' v-if="gDetail!==''">
    <Nav :cut="'goodsList'"></Nav>
    <div class="container">
      <div class="detail">
        <div class="imgs">
          <div class="max-img">
            <img img v-lazy="loadImg(gDetail.imgUrl)">
          </div>
          <div class="imglist">
            <div :class="{img:true,end:index===2}" v-for="(item,index) in gDetail.pics1" v-if="index<3"><img
              v-lazy="loadImg(item)" style="cursor: pointer;" @click="bigimg(item)"></div>
          </div>
        </div>
        <div class="d-con">
          <div class="name" style="font-size: 18px;color: #333333;margin-bottom: 5px">{{gDetail.shopName}}</div>
          <div class="desc" style="font-size: 16px;color: #ff9900;margin-bottom: 10px" :title="gDetail.material">
            {{gDetail.material}}
          </div>
          <div class="price" style="color: #666;font-size: 16px;margin-bottom: 20px;padding-left: 10px">
            <label>价格：</label>
            <span style="color: #cc0000;font-size: 14px;margin-right: 33px">
              ¥<span
              style="font-size: 16px">{{(((goldPrice+gDetail.handPay)*gDetail.shopstandardVo.weight/1000)/100).toFixed(2).split('.')[0]}}</span>
              .<span>{{(((goldPrice+gDetail.handPay)*gDetail.shopstandardVo.weight/1000)/100).toFixed(2).split('.')[1]}}</span>
            </span>
            <label>手工费：</label><span style="font-size: 14px;"><span style="font-size: 16px">{{(gDetail.handPay/100).toFixed(2).split('.')[0]}}</span>.<span>{{(gDetail.handPay/100).toFixed(2).split('.')[1]}}</span>元/g</span>
          </div>
          <div class="spec">
            <label>规格</label>
            <ul>
              <li v-for="(item,index) in gDetail.standardVos" @click="selectSpec(item.id,item.weight,item.stock)"
                  :class="{active:item.id===gDetail.shopstandardVo.id}">{{item.standardName}}
                {{(item.weight/1000).toFixed(1)}}g
              </li>
            </ul>
          </div>
          <div class="num">
            <label>数量</label>
            <div style="float:left;width: 83px;border: 1px solid #ccc;height: 26px">
              <input type="text" v-model="num" style="border: 0;width: 61px;float: left;height: 24px">
              <div style="float: left;width: 20px;border-left: 1px solid #ccc;height: 100%;text-align: center">
                <div style="width: 100%;height: 13px;cursor: pointer" @click="number('add')">
                  <img src="./assets/up.png" style="margin-top: -9px;">
                </div>
                <div style="width: 100%;height: 13px;cursor: pointer" @click="number('sub')">
                  <img src="./assets/down.png" style="margin-top: -8px;"
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="btns">
            <button class="btn" @click="buystep0">立即购买</button>
            <button class="btn" style="background: #fc5b1e" @click="addCart">加入购物车</button>
          </div>
        </div>
      </div>
      <div class="detail-wrap">
        <div class="tabs">
          <ul>
            <li :class="{active:tabName==='detail'}" @click="cutDetail('detail')">商品详情</li>
            <li :class="{active:tabName==='spec'}" @click="cutDetail('spec')">商品规格</li>
            <li :class="{active:tabName==='eval'}" @click="cutDetail('eval')">商品评价</li>
          </ul>
        </div>
        <div class="detail-con">
          <div :class="{active:tabName==='detail'}" style="padding: 26px 41px;text-indent: 2em;line-height:30px"
               v-html="gDetail.shopDesc">
          </div>
          <div :class="{spec:true,active:tabName==='spec'}">
            <div class="img">
              <img v-lazy="loadImg(gDetail.imgUrl)">
            </div>
            <ul>
              <li>品牌：{{gDetail.brand}}</li>
              <li>镶嵌材质：{{gDetail.material}}</li>
              <li>贵金属成分：{{gDetail.composition}}</li>
              <li>适用对象：{{gDetail.target}}</li>
              <li class="remark">
                <label>备注：</label>
                <div>因物料和测量操作存在差异，实际货品的重量可能存在误差，图示仅供参考，请以实物为准。</div>
              </li>
            </ul>
          </div>
          <div :class="{eval:true,active:tabName==='eval'}">
            <ul>
              <li v-for="(item,index) in comment.content">
                <div class="img">
                  <img v-lazy="loadImg(item.userVo.photo)" alt="">
                </div>
                <div class="comment-text">
                  <div style="margin-bottom: 10px">
                    <span>{{item.userVo.mobile.substring(0,3)}}****{{item.userVo.mobile.substring(7)}}</span><span
                    style="float: right">{{item.createTime}}</span>
                  </div>
                  <div class="comment">{{item.content}}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import Nav from './components/Nav'

  import API from './api'
  import Notify from './components/Notify'
  export default {
    name: 'goodsDetail',
    components: {
      Nav,
      Notify
    },
    props: ['_parentThis'],
    data: function () {
      return {
        notifyStatus: 2,
        gDetail: '',
        num: 1,
        tabName: 'detail',
        comment: '',
        goldPrice: 0,
        stock: 0
      }
    },
    methods: {
      getGoodsDetail: function () {
        this.$http.post(API.findGoldshoppingById, {
          id: this.$route.params.goodsId
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.gDetail = result.object
            for (var i = 0; i < this.gDetail.standardVos.length; i++) {
              if (this.gDetail.standardVos[i].id === this.gDetail.shopstandardVo.id) {
                this.gDetail.shopstandardVo.stock = this.gDetail.standardVos[i].stock
              }
            }
            this.stock = this.gDetail.shopstandardVo.stock
            if (this.stock < 1) {
              this.notifyStatus = '0|该商品库存为0'
            }
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      bigimg: function (img) {
        this.gDetail.imgUrl = img
      },
      loadImg: function (path) {
        return API.path + path
      },
      number: function (handle) {
        handle === 'add' ? this.num++ : this.num--
      },
      findCommentList: function () {
        this.$http.post(API.findCommentList, {
          id: this.$route.params.goodsId,
          pageSize: 100
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.comment = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      cutDetail: function (name) {
        this.tabName = name
      },
      selectSpec: function (id, weight, stock) {
        this.gDetail.shopstandardVo.id = id
        this.gDetail.shopstandardVo.weight = weight
        this.gDetail.shopstandardVo.stock = stock
        this.stock = stock
      },
      addCart: function () {
        if (this.$cookie.get('id')) {
          this.$http.post(API.addCar, {
            shopId: this.$route.params.goodsId,
            standardId: this.gDetail.shopstandardVo.id,
            userId: this.$cookie.get('id'),
            number: this.num
          }).then((ret) => {
            const result = ret.body
            if (result.code === 1) {
              this._parentThis.carNum += 1
              this.notifyStatus = '1|添加购物车成功！'
            } else {
              this.notifyStatus = '0|' + result.message
            }
          }, (err) => {
            console.log(err)
          })
        } else {
          this.$router.push({'name': 'login'})
        }
      },
      buystep0: function () {
        if (this.$cookie.get('id')) {
          if (!this.$cookie.get('id')) {
            this.$router.push({'name': 'login'})
          }
          this.$http.post(API.findGoldshoppingById, {
            id: this.$route.params.goodsId,
            userId: this.$cookie.get('id')
          }).then((ret) => {
            const result = ret.body
            if (result.code === 1) {
              var n = 0
              for (var m = 0; m < (result.object.standardVos).length; m++) {
                if (result.object.standardVos[m].id === this.gDetail.shopstandardVo.id) {
                  n = m
                }
              }
              var shopInfo = '[{"shopId":' + this.$route.params.goodsId + ',"standardId":' + this.gDetail.shopstandardVo.id + ',"number":' + this.num + '}]'
              var shopVo = result.object.imgUrl + ',' + result.object.shopName + ',' + this.goldPrice + ',' + result.object.standardVos[n].standardName + ',' + result.object.standardVos[n].weight + ',' + this.num + ',' + this.gDetail.shopstandardVo.id + ',' + result.object.shopDesc + ',' + result.object.handPay
              this.$cookie.set('sp_standardId', this.gDetail.shopstandardVo.id + '-' + this.num)
              this.$cookie.set('sp_shopInfo', shopInfo)
              this.$cookie.set('sp_shopVo', escape(shopVo))
              this.$router.push({'name': 'orderSingleAccount'})
            } else {
              this.notifyStatus = '0|' + result.message
            }
          }, (err) => {
            console.log(err)
          })
        } else {
          this.$router.push({'name': 'login'})
        }
      },
      findGoldPrice: function () {
        this.$http.post(API.findGoldPrice, {
          userId: this.$cookie.get('id')
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.goldPrice = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    watch: {
      num: function (newVal, oldVal) {
        if (!/^[1-9]*[1-9][0-9]*$/.test(newVal)) {
          this.num = oldVal
        } else {
          if (this.stock > 0 && parseInt(this.num) > this.stock) {
            this.num = oldVal
            this.notifyStatus = '0|已超过最大库存！'
          }
        }
      }
    },
    beforeDestroy: function () {
      this._parentThis.cartStatus = true
    },
    mounted: function () {
      this.getGoodsDetail()
      this.findCommentList()
      this.findGoldPrice()
      this._parentThis.cartStatus = false
    }
  }
</script>

